document.addEventListener('DOMContentLoaded', () => {
    // 初始化用户菜单
    const userDropdown = new bootstrap.Dropdown('#userDropdown', {
        autoClose: true,
        popperConfig: (defaultConfig) => ({
            ...defaultConfig,
            modifiers: [
                {
                    name: 'offset',
                    options: {
                        offset: [0, 8]  // 微调菜单位置
                    }
                },
                {
                    name: 'preventOverflow',
                    options: {
                        boundary: 'viewport'  // 防止溢出视口
                    }
                }
            ]
        })
    })

    // 退出登录处理
    document.querySelector('.logout-btn').addEventListener('click', () => {
        $.ajax({
            url: '/accounts/logout/',
            type: 'POST',
            success: function (response) {
                console.log(response)

                window.location.href = response.redirect_url
            }
        })
        userDropdown.hide()
    })

    // 全局点击关闭
    document.addEventListener('click', (e) => {
        if (!e.target.closest('.user-panel')) {
            userDropdown.hide()
        }
    })
})

// 新增产品选择器初始化
// function initProductSelector() {
//     $.ajax({
//         url: '/products/api/user-products-selector/',
//         success: function (response) {
//             const $dropdown = $('.product-selector');
//             const $button = $dropdown.find('button');
//             const $menu = $dropdown.find('.dropdown-menu');
//
//             // 更新默认显示
//             $button.text(response.default_product || '选择产品');
//
//             // 清空现有选项
//             $menu.empty();
//
//             // 动态生成产品项
//             response.products.forEach(product => {
//                 $menu.append(`
//           <li>
//             <a class="dropdown-item"
//                href="#"
//                data-product-id="${product.id}">
//               ${product.name}
//             </a>
//           </li>
//         `);
//             });
//
//             // 添加事件监听
//             $menu.on('click', '.dropdown-item', function () {
//                 const productId = $(this).data('product-id');
//                 loadProductDetail(productId);
//                 $button.text($(this).text());
//             });
//         }
//     });
// }

function initProductSelector() {
  $.ajax({
    url: '/products/api/user-products-selector/',
    success: function(response) {
      const $dropdown = $('.product-selector');
      const $button = $dropdown.find('button');
      const $menu = $dropdown.find('.dropdown-menu');

      // 移除默认选中逻辑，设置初始状态
      $button.text('Select Product').addClass('text-muted');     // 灰色提示文字

      // 清空现有选项
      $menu.empty();

      // 生成下拉选项（保持图片中的简约风格）
      response.products.forEach(product => {
        $menu.append(`
          <li>
            <a class="dropdown-item" 
               href="#" 
               data-product-id="${product.id}"
               style="min-width: 160px;"> <!-- 匹配图片中元素宽度 -->
              ${product.name}
            </a>
          </li>
        `);
      });

      // 优化点击交互（保持图片中的高亮逻辑）
      $menu.on('click', '.dropdown-item', function(e) {
        e.preventDefault();
        const $this = $(this);

        // 移除所有高亮
        $menu.find('.dropdown-item').removeClass('active');

        // 设置当前选中状态（模拟图片中的蓝色高亮）
        $this.addClass('active');
        $button.text($this.text())
          .removeClass('text-muted')
          .css('color', '#2A3950'); // 匹配图片中的深蓝色文字

        loadProductDetail($this.data('product-id'));
      });
    }
  });
}


// 跳转仪表盘
function loadProductDetail(productId) {
    window.location.href = `/products/api/dashboard/${productId}/`;  // 跳转前端路由
}


// 初始化调用
$(document).ready(function () {
    initProductSelector();
});